<script setup>
import {create_message, list_message} from "@/apis/v1/message/message.js";
import {ElMessage} from "element-plus";
import vueDanmaku from 'vue3-danmaku';

const BASE_IMG = ref(import.meta.env.VITE_APP_IMG_API);
const count = ref(null);
const timer = ref(null);
const content = ref("");
const show = ref(false);
const messageList = ref([]);
const addToList = () => {
  if (content.value.trim() === "") {
    ElMessage.error("留言不能为空");
    return false;
  }
  if (count.value) {
    ElMessage.error("30秒后才能再次留言");
    return false;
  }
  create_message({content: content.value}).then(res => {
    if (res.code === 200) {
      ElMessage.success(res.message);
      const d = {
        avatar: "/static/img/user/visitor.jpg",
        content: content.value,
      };
      content.value = "";
      messageList.value.push(d);
    }
  });
  const TIME_COUNT = 30;
  if (!timer.value) {
    count.value = TIME_COUNT;
    timer.value = setInterval(() => {
      if (count.value > 0 && count.value <= 30) {
        count.value--;
      } else {
        clearInterval(timer.value);
        timer.value = null;
      }
    }, 1000);
  }
};

onMounted(() => {
  list_message().then(res => {
    messageList.value = res.result;
  });
});
</script>

<template>
  <article>
    <!-- 弹幕输入框 -->
    <div class="message-input-box">
      <h1 class="title">留言板</h1>
      <div class="message-input">
        <input type="text" class="input" v-model="content" placeholder="说点什么吧" @keyup.enter="addToList"
               @focus="show = true">
        <el-button style="opacity: .8;" class="ml-3" round @click="addToList" v-show="show">发送</el-button>
      </div>
    </div>
    <!-- 弹幕列表 -->
    <div class="barrage-list">
      <vue-danmaku style="height: 100%" ref="danmaku" v-model:danmus="messageList" useSlot :channels="100">
        <template v-slot:dm="{ index, danmu }">
          <span class="barrage-items">
            <img :src="BASE_IMG + danmu.avatar" alt="">
            <span class="ml-2">{{ danmu.nickname }}：</span>
            <span class="ml-2">{{ danmu.content }}</span>
          </span>
        </template>
      </vue-danmaku>
    </div>
  </article>
</template>

<style scoped lang="less">
article {
  position: relative;
  width: 100%;
  height: 100vh;
  animation: header-effect 1s;

  .message-input-box {
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 360px;
    color: #fff;
    text-align: center;
    z-index: 5;

    .message-title {
      color: var(--white);
      animation: title-scale 1s;
    }

    .message-input {
      margin-top: 2rem;
      height: 2.5rem;
      display: flex;
      justify-content: center;

      .input {
        position: relative;
        width: 284px;
        height: 40px;
        font-size: 14px;
        padding-left: 15px;
        border-radius: 20px;
        display: inline-block;
        outline: none;
        border: none;
      }

      .ml-3 {
        margin-left: 10px;
        width: 70px;
        height: 40px;
        border: 1px solid var(--border-line);
        animation: left-in 1s ease;

        @keyframes left-in {
          0% {
            transform: translateY(-500%);
          }

          100% {
            transform: translateX(0);
          }
        }
      }
    }
  }

  .barrage-list {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;

    .barrage-items {
      padding: 5px 10px 5px 5px;
      margin-top: 10px;
      background: #000;
      border-radius: 100px;
      color: #fff;
      display: flex;
      align-items: center;

      img {
        margin: 0 5px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }
  }
}
</style>